<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<!-- [Head] start -->

<head>
    <title>Typography | Berry Bootstrap 5 Admin Template</title>
    <!-- [Meta] -->
    <meta charset="utf-8" />
    <script src="/myhouse/static/mediator/js/plugins/popper.min.js"></script>
    <script type="text/javascript" src="/myhouse/static/mediator/js/jquery-3.2.1.min.js"></script>
    <script src="/myhouse/static/mediator/js/plugins/simplebar.min.js"></script>
    <script src="/myhouse/static/mediator/js/plugins/bootstrap.min.js"></script>
    <script src="/myhouse/static/mediator/js/config.js"></script>
    <script src="/myhouse/static/mediator/js/pcoded.js"></script>
    <script src="/myhouse/static/mediator/js/plugins/clipboard.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
            name="description"
            content="Berry is made using Bootstrap 5 design framework. Download the free admin template & use it for your project."
    />
    <meta name="keywords" content="Berry, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Bootstrap Admin Template" />

    <!-- [Favicon] icon -->
    <link rel="icon" href="/myhouse/static/mediator/images/favicon.svg" type="image/x-icon" />
    <!-- [Google Font] Family -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link" />
    <!-- [Tabler Icons] https://tablericons.com -->
    <link rel="stylesheet" href="/myhouse/static/mediator/fonts/tabler-icons.min.css" />
    <!-- [Material Icons] https://fonts.google.com/icons -->
    <link rel="stylesheet" href="/myhouse/static/mediator/fonts/material.css" />
    <!-- [Template CSS Files] -->
    <link rel="stylesheet" href="/myhouse/static/mediator/css/style.css" id="main-style-link" />
    <link rel="stylesheet" href="/myhouse/static/mediator/css/style-preset.css" id="preset-style-link" />

</head>
<!-- [Head] end -->
<!-- [Body] Start -->

<body>
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
    <div class="loader-track">
        <div class="loader-fill"></div>
    </div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ Header Topbar ] start -->
<jsp:include page="/inc/mediatorTop.jsp"></jsp:include>
<!-- [ Header ] end -->
<!-- [ Sidebar Menu ] start -->
<nav class="pc-sidebar">
    <div class="navbar-wrapper">
        <div class="m-header">
            <a href="index.jsp" class="b-brand">
                <!-- ========   Change your logo from here   ============ -->
                <img src="/myhouse/static/mediator/images/logo-dark.svg" alt="" class="logo logo-lg" />
            </a>
        </div>
        <jsp:include page="/inc/mediatorLeft.jsp"></jsp:include>
    </div>
</nav>
<!-- [ Sidebar Menu ] end -->

<style type="text/css">
    table{
        font-size: 20px;
    }
    input[type="submit"]{
        position: relative;
        left: 250px;
        top: 50px;
        width: 200px;
    }
    td{
        width: 200px;
    }
</style>

<script type="text/javascript">
    $(function (){
        $("#myform").submit(all);
    });
    function all(){
        var name = check();
        var password = pass();
        var phone = phoneby();
        var e = emails();
        return name&&password&&phone&&e;
    }
</script>
<div class="pc-container">
    <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h5 class="m-b-10">个人信息</h5>
                        </div>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/myhouse/mediator/index">首页</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0)">完善/修改密码</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- [ sample-page ] start -->
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>修改密码</h5>
                    </div>
                    <div class="card-body" style="height: 1000px; text-align: center">
                        <input type="hidden" id="id" value="${sessionScope.mediator.id}">
                        <span id="span"></span>
                        <table width="1000px;" >
                            <tr>
                                <td>旧密码：</td>
                                <td><input type="password" id="jmm" style="position: relative;left: -100px;"></td>
                                <td><span id="x1" style="position: relative;left: -230px;"><img id="lookimg1" src="/myhouse/static/mediator/images/look.png" width="20px"></span></td>
                                <td style="position: relative;left: -330px;text-align: left;"><span id="pass" width="500px" style="font-size: 14px;"></span></td>
                            </tr>
                            <tr>
                                <td>新密码：</td>
                                <td><input type="password"  id="xmm" style="position: relative;left: -100px;"></td>
                                <td><span id="x2" style="position: relative;left: -230px;"><img id="lookimg2" src="/myhouse/static/mediator/images/look.png" width="20px"></span></td>
                                <td style="position: relative;left: -330px;text-align: left;"><span id="pas" style="font-size: 14px;"></span></td>
                            </tr>
                            <tr>
                                <td>确认密码：</td>
                                <td><input type="password" id="qrmm" style="position: relative;left: -100px;"></td>
                                <td ><span id="x3" style="position: relative;left: -230px;"><img id="lookimg3" src="/myhouse/static/mediator/images/look.png" width="20px"></span></td>
                                <td style="position: relative;left: -330px;text-align: left;"><span id="pa" style="font-size: 14px;"></span></td>

                            </tr>
                            <tr>
                                <td colspan="3">
                                    <input type="button" id="qd" value="确定" style="position: relative;top: 20px;left: -115px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="button" value="返回" id="fh" style="position: relative;top: 20px;left: -90px;">
                                </td>
                            </tr>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function (){
        $("#fh").click(function (){
            location.href = "/myhouse/mediator/bcColor";
        });
        $("#qd").click(function (){
            var pass = $("#jmm").val();
            var id = $("#id").val();
            var pa = $("#xmm").val();
            $.ajax({
                url:"/myhouse/mediator/selectByPass",
                type:"post",
                data:{
                    id:id,
                    mediatorPass:pass
                },
                success:function (mes){
                    if (mes == "1"){
                        $.ajax({
                            url:"/myhouse/mediator/updateByPass",
                            type:"post",
                            data:{
                                id:id,
                                mediatorPass:pa
                            },
                            success:function (mes){
                                location.href="/myhouse/mediator/login"
                            }
                        })
                    }else {
                        $("#span").text("旧密码错误");
                        $("#span").css("color","red");
                    }
                }
            })
        });
    })
</script>
<script type="text/javascript">
    $(function (){
       $("#jmm").blur(function (){
           var pass = $("#jmm").val();
           let regs = /^\w{6,8}$/
           if(regs.test(pass)){
               $("#pass").text("√");
               $("#pass").css("color","green");
               return true;
           }
           else{
               $("#pass").text("请输入6-8位大小写英文字母和数字！");
               $("#pass").css("color","red");
               return false;
           }
       });
       $("#xmm").blur(function (){
           var pass = $("#xmm").val();
           let regs = /^\w{6,8}$/
           if(regs.test(pass)){
               $("#pas").text("√");
               $("#pas").css("color","green");
               return true;
           }
           else{
               $("#pas").text("请输入6-8位大小写英文字母和数字！");
               $("#pas").css("color","red");
               return false;
           }
       })
       $("#qrmm").blur(function (){
           var pas = $("#xmm").val();
           var pass = $("#qrmm").val();
           let regs = /^\w{6,8}$/
           if(regs.test(pass) && pass == pas){
               $("#pa").text("√");
               $("#pa").css("color","green");
               return true;
           }
           else{
               $("#pa").text("×");
               $("#pa").css("color","red");
               return false;
           }
       })
    });
</script>
<script>
    var jsq = 2;
    $(function (){
        $("#x1").click(sbgl)
        $("#x2").click(sbll)
        $("#x3").click(sbll1)

        $("#lookimg1").click(changeLookImg1)
        $("#lookimg2").click(changeLookImg2)
        $("#lookimg3").click(changeLookImg3)
    })
    //改变眼睛图片部分
    function changeLookImg1() {
        var src = $("#lookimg1").attr("src");
        if (src === "/myhouse/static/mediator/images/look.png") {
            $("#lookimg1").attr("src", "/myhouse/static/mediator/images/dontlook.png");
        }
        else if (src === "/myhouse/static/mediator/images/dontlook.png") {
            $("#lookimg1").attr("src", "/myhouse/static/mediator/images/look.png");
        }
    }
    function changeLookImg2() {
        var src = $("#lookimg2").attr("src");
        if (src === "/myhouse/static/mediator/images/look.png") {
            $("#lookimg2").attr("src", "/myhouse/static/mediator/images/dontlook.png");
        }
        else if (src === "/myhouse/static/mediator/images/dontlook.png") {
            $("#lookimg2").attr("src", "/myhouse/static/mediator/images/look.png");
        }
    }
    function changeLookImg3() {
        var src = $("#lookimg3").attr("src");
        if (src === "/myhouse/static/mediator/images/look.png") {
            $("#lookimg3").attr("src", "/myhouse/static/mediator/images/dontlook.png");
        }
        else if (src === "/myhouse/static/mediator/images/dontlook.png") {
            $("#lookimg3").attr("src", "/myhouse/static/mediator/images/look.png");
        }
    }

    function sbgl(){
            $("#jmm").attr("type","text")
            jsq++;
            if(jsq%2==0){
                $("#jmm").attr("type","password")
                $("#lookimg").attr("src","/myhouse/static/mediator/images/dontlook.png")
            }
    }
    var jsq1=2;
    function sbll(){
        $("#xmm").attr("type","text")
        jsq1++;
        if(jsq1%2==0){
            $("#xmm").attr("type","password")
        }
    }
    var jsq2=2;
    function sbll1(){
        $("#qrmm").attr("type","text")
        jsq2++;
        if(jsq2%2==0){
            $("#qrmm").attr("type","password")
        }
    }

</script>
<!-- [ Main Content ] end -->
<style type="text/css">
    #outer{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #mydiv{
        font-size: 100px;
        font-family: "华文楷体";
        margin-top: 100px;
    }
</style>
<!-- Required Js -->

<script>
    window.addEventListener('load', (event) => {
        var i_clip = new ClipboardJS('.color-block');
        i_clip.on('success', function (e) {
            var targetElement = e.trigger;
            let icon_badge = document.createElement('span');
            icon_badge.setAttribute('class', 'ic-badge badge bg-success float-end');
            icon_badge.innerHTML = "copied";
            targetElement.append(icon_badge);
            setTimeout(function () {
                targetElement.children[0].remove();
            }, 3000);
        });

        i_clip.on('error', function (e) {
            var targetElement = e.trigger;
            let icon_badge = document.createElement('span');
            icon_badge.setAttribute('class', 'ic-badge badge bg-danger float-end');
            icon_badge.innerHTML = "Error";
            targetElement.append(icon_badge);
            setTimeout(function () {
                targetElement.children[0].remove();
            }, 3000);
        });
    });
</script>
</body>
</html>
